feat(webapp): redesign the side menu project and organization menus#4066
Conversation
The top-left menu now represents the organization: it shows the org name and avatar and opens a flat list of org-level pages (Settings, Usage, Billing, Billing alerts, Team, an Integrations submenu, Switch organization, Account, Logout). Projects move into a dedicated "Project" section in the menu body: a project picker dropdown with the environment selector directly beneath it.
The Project menu trigger now matches the other side menu items: its label and folder icon are dimmed by default and brighten on hover, instead of staying highlighted. The environment selector shows a "[name] environment" tooltip on hover. It opens instantly when the side menu is collapsed and after a short delay when expanded.
Add an end tree-connector to the left of the environment selector and remove the gap between it and the project dropdown, so the environment reads as nested under the project in the side menu.
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThe org route loader now detects RBAC and SSO plugin availability, exposes both flags in loader data, and adds hooks for reading them. The side menu is reorganized into separate organization and project selectors: the organization popover lists org-level actions, integrations, account, logout, and organization switching, while the project selector shows project-only actions. 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Preview Deployment
|
Bump the org menu and project picker popover items to a 20px leading icon and a 0.90625rem label so they match the side menu nav items. The project folder icons keep their indigo color and the Vercel and Slack icons keep their smaller size.
…oll area Move the Project header, project picker, and environment selector into a fixed region so they stay put while the nav list scrolls, and shift the scroll divider down to the top of the scrollable section.
The side menu environment switcher is now a segmented control (Dev, Staging, Prev, Prod) instead of a dropdown, with each segment tinted in its environment color when active. The Dev segment shows the local dev server connection as a small pulsing dot with a hover tooltip, replacing the old connection button and modal. Preview opens a popover to switch branches and shows the active branch name. When the side menu is collapsed it falls back to the original dropdown selector, which is also still used on the blank-state panels and the Limits page.
- Revert the environment segmented control back to the dropdown selector, restoring the dev connection button and its modal - Hide the org, project, and environment selector chevrons until hover - Reorganize the project popover so New project and Project settings sit above a divider, before the project list - Remove the Environments header from the environment popover - Fix the dev connection button being clipped and tune the scroll section padding
…ide menu - Brighten the project selector trigger label and icon - Keep a constant 1px border on the project selector (transparent when collapsed) so it no longer nudges 1px on collapse - Animate the scroll section left padding in sync with the side menu collapse, matching its duration and easing - Remove the H shortcut key from the Help & Feedback button and surface it in a 500ms hover tooltip instead, keeping the shortcut working - Match the Help & Feedback label to the other side menu items (size and dimmed color)
- Apply the scrollable section left padding to the top Project section (Project header, project selector, environment selector), animated in sync with the collapse - Keep the menus reducing width instead of shifting right by holding their right edge - Match the section right and bottom padding to the left padding for symmetry, since there is no scrollbar in this section - Leave the organization menu unchanged
# Conflicts: # apps/webapp/app/components/navigation/SideMenu.tsx # apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx
@trigger.dev/build
trigger.dev
@trigger.dev/core
@trigger.dev/python
@trigger.dev/react-hooks
@trigger.dev/redis-worker
@trigger.dev/rsc
@trigger.dev/schema-to-json
@trigger.dev/sdk
commit: |
- Replace the Ask AI button in the side menu footer with a collapse toggle that mirrors the middle handle (toggles the menu, Collapse/Expand tooltip with the cmd+b shortcut) - Add an animated LeftSideMenuIcon (scaleX transform so it animates on the compositor and never snaps) that animates on button hover, dimmed by default and bright on hover - Swap in a static LeftSideMenuCollapsedIcon when the menu is collapsed, and match the tooltip open delay to the Help and Feedback button - Add LeftSideMenuIcon to the storybook icons route Removes the Ask AI button and its cmd+i shortcut from the footer.
…r button The side menu footer collapse button now handles toggling, so the middle-right handle (and its animated chevron) is redundant. The cmd+b shortcut is preserved.
…llapsing The top section's bottom padding was pb-1 when collapsed and pb-2.5 when open, causing a vertical layout shift below the environment menu on toggle. Make it a constant pb-2.5 so only the horizontal padding animates.
- Add an Account menu (user avatar button) to the top of the side menu, between the organization menu and where the impersonation button used to be - The menu links to Profile, Personal Access Tokens, and Security, plus Logout - For admins it adds an Admin dashboard / Stop impersonating item with the cmd+esc shortcut shown inline, replacing the old permanent admin/impersonation button - Move Logout out of the organization menu into the account menu, and add a divider above Switch organization
Add a ChainLinkIcon and use it for the Private connections item in both the organization settings side menu and the organization dropdown, replacing the heroicons link icon.
…eholder - Replace the heroicons UserCircleIcon fallback in UserProfilePhoto/UserAvatar with the custom AvatarCircleIcon, matching the account menu Profile item - Size the account button avatar to match the popover menu item icons (20px)
Adopt the Security page's row-and-divider pattern on /account: each setting is a row with the title on the left and its control on the right. Profile picture, Full name, Email address, and a "Receive onboarding emails" toggle switch sit on equal-height rows, and the Update button is now a primary button.
…he project menu Bump the Env popover's item icons (size-5) and labels (text-[0.90625rem]) to match the Project popover, including the preview/dev branch submenu, its branch list, and the "Manage branches" footer. Applied only at these call sites so the shared EnvironmentLabel/EnvironmentCombo defaults used across the app are unchanged.
… org menu Moves the "Account" submenu shown on the collapsed rail from the top of the org popover to the bottom, with the divider now above it instead of below.
The admin shortcut (Cmd/Ctrl+Esc to open the admin dashboard, or to stop impersonating while impersonating) was registered inside the account menu, which only mounts on project pages. So it did nothing on the account, organization settings and admin pages. Move it into a GlobalShortcuts component mounted once at the app root, so it works on every page regardless of which side menu is rendered, and remove the account-menu registration so it never fires twice. GlobalShortcuts is the place to add future app-wide shortcuts.
…apturable) Cmd+Esc can't be captured on Chrome/macOS: the browser doesn't deliver an Escape keydown to the page while a modifier is held, so no listener ever sees it (confirmed with a Radix dialog, which closes on any Escape keydown, not closing on Cmd+Esc). That is why the admin shortcut did nothing. Switch it to Cmd+Option+A (Ctrl+Alt+A on Windows): an admin-only, two-modifier combo that no user-facing or browser shortcut uses, and which is actually delivered because it is a letter key. It is matched on event.code (KeyA) so it still works when Option makes the key report an alternate character on macOS, which is why it is a small raw listener in GlobalShortcuts rather than the key-based shortcut hook. The account-menu badge now reads Cmd Option A.
Shorten the explanatory comments added across the resizable side menu and org menu work to the essentials. Comment-only, no behaviour change.
…alShortcuts useOptionalUser returns UserWithDashboardPreferences, which has no isImpersonating field (it comes from the org loader), so referencing user.isImpersonating failed the typecheck. Source it from useIsImpersonating, the same hook useHasAdminAccess uses.
The scroll body's thumb is transparent until the pointer is inside the scroll area, then fades in (200ms) and back out on leave. It is styled via ::-webkit-scrollbar (not scrollbar-width) so Chrome keeps a classic, always-present bar to reveal instead of the auto-hiding overlay, and the thumb color is a registered @Property so it can transition. The thumb is a thin rounded pill (transparent border + padding-box clip) inset within an invisible reserved channel, so there is no layout shift.
The expanded notification card now sits flush to the top of its slot (p-2 pt-0); the collapsed bell icon is unchanged.
# Conflicts: # apps/webapp/app/root.tsx
The dev branch name in the side menu environment selector now shows an ellipsis when it is too long to fit, instead of clipping abruptly.
The organization and account popover menus now show an "Organization" and "Account" section heading at the top.
Grabbing the resize handle cancels an in-flight collapse/expand animation frame but left the isAnimating flag set. A drag that then rests via writeVisual (width >= DEFAULT_WIDTH) never reset it, so the side menu kept hiding its scrollbar gutter until the next full collapse/expand. Clear the flag on handle pointer-down so the reserved gutter returns on release.
…psed The "Organization" section heading in the org popover now only shows when the side menu is expanded.
Trim the detailed bullet list to two user-facing sentences for the release notes.
…u collapses The banner rides down with the bottom section and fades out as the menu collapses, then rises back and fades in when it reopens. Its icon no longer shrinks and the label truncates when space is tight.
… side menu The selector is reused in the blank-state panels and the limits page, where --sm-label-opacity is unset. Its label max-width now falls back to a ~200px cap in those contexts so long environment names truncate instead of widening the control, matching the previous behavior.
Redesign of the main side menu: separates Projects and Accounts from the Organization menu and makes the menu resizable.
Main changes
Preview URL: https://samejr-org-menu-update.triggerlabs.dev/
side.menu.mp4